<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box"></div>
</body>

</html>
<script>
    // Math.random():ES下面的数学对象下面的方法。方法随机产生0-1之间的数，不包括1。
    // console.log(Math.random());
    // 案例：随机产生0-9这十个数字。
    // console.log(parseInt(Math.random() * 10));

    // function rannum() {
    //     return parseInt(Math.random() * 10);
    // }
    // console.log(rannum());

    // 1.随机产生4位数字验证码
    // console.log(parseInt(Math.random() * 10));
    // console.log(parseInt(Math.random() * 10));
    // console.log(parseInt(Math.random() * 10));
    // console.log(parseInt(Math.random() * 10));

    // for (var i = 1; i <= 4; i++) { //四次的循环
    //     document.write(parseInt(Math.random() * 10));
    // }


    //随机产生四位数字
    function yzm() {
        var str = '';
        for (var i = 1; i <= 4; i++) { //四次的循环
            str += parseInt(Math.random() * 10); //拼接数字字符串，拼接四次
        }
        return str;
    }
    document.write(yzm());

    // 2.设置标签元素，点击标签切换验证码。
    // box.innerHTML = yzm();
    // box.onclick = function() { //事件处理函数，点击box，函数就调用了
    //     box.innerHTML = yzm();
    // };


    //3.带参数的函数应用
    //带参数的普通函数 - 直接调用
    // function sum(a, b) {
    //     return a + b;
    // }
    // console.log(sum(1, 2));

    //带参数的函数表达式 - 直接调用
    // var sum1 = function(a, b) {
    //     return a + b;
    // }
    // console.log(sum1(3, 4));

    //带参数的自执行函数 - 直接输出整个函数。
    // console.log(! function(a, b) { //转布尔值
    //     return a + b;
    // }(5, 6));

    // console.log((function(a, b) { //合适
    //     return a + b;
    // })(5, 6));

    //带参数的事件处理函数 - 函数外面再套一层函数
    // function sum(a, b) {
    //     return a + b;
    // }
    // document.onclick = function() {
    //     console.log(sum(4, 5));
    // };
    // document.onclick = sum(5, 6); //错误的写法！！！

    //总结：
    //注意自执行函数和事件处理函数处理带参数函数时的情况。
    //事件处理函数，将函数体给事件。

    //写法1
    // document.onclick = function() {
    //     console.log(123);
    // }

    //写法2
    // function fn() {
    //     console.log(456);;
    // }

    // document.onclick = fn;   //√
    // document.onclick = fn(); //x 已经调用了，和事件没有关系了
</script>